<template>
  <div class="dv-decoration-9">
    <svg width="100px" height="100px" style="transform: scale(0.95, 0.95)">
      <defs>
        <polygon
          id="decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
          points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"
        ></polygon>
      </defs>
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="transparent"
        stroke-width="10"
        stroke-dasharray="80, 100, 30, 100"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          repeatCount="indefinite"
        ></animateTransform>
      </circle>
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="transparent"
        stroke-width="6"
        stroke-dasharray="50, 66, 100, 66"
        stroke="rgba(3, 166, 224, 0.8)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;-360 50 50"
          dur="3s"
          repeatCount="indefinite"
        ></animateTransform>
      </circle>
      <circle
        cx="50"
        cy="50"
        r="38"
        fill="transparent"
        stroke="rgba(3,166,224,0.3)"
        stroke-width="1"
        stroke-dasharray="5, 1"
      ></circle>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="rgba(3, 166, 224, 0.8)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0.15s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="rgba(3, 166, 224, 0.8)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0.3s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0.45s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="transparent"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0.6s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0.75s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="transparent"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="0.9s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="rgba(3, 166, 224, 0.8)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.05s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="transparent"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.2s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="rgba(3, 166, 224, 0.8)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.35s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="transparent"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.5s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="transparent"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.65s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.8s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="transparent"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="1.95s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="2.1s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="2.25s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="transparent"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="2.4s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="rgba(3, 166, 224, 0.8)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="2.55s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        stroke="rgba(3, 166, 224, 0.5)"
        fill="transparent"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="2.7s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <use
        xlink:href="#decoration-9-polygon-f617906a7dfd421fbe5b00a68e8f1375"
        fill="rgba(3, 166, 224, 0.8)"
        stroke="rgba(3, 166, 224, 0.5)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;360 50 50"
          dur="3s"
          begin="2.85s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <circle
        cx="50"
        cy="50"
        r="26"
        fill="transparent"
        stroke="rgba(3,166,224,0.3)"
        stroke-width="1"
        stroke-dasharray="5, 1"
      ></circle>
    </svg>

    <slot></slot>
  </div>
</template>
  
  <script>
export default {
  name: "DvDecoration9",
  props: {
    color: {
      type: Array,
      default: () => [],
    },
    dur: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {};
  },
};
</script>
  
  <style lang="scss" scoped>
.dv-decoration-9 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    position: absolute;
    left: 0px;
    top: 0px;
    transform-origin: left top;
  }
}
</style>
  